<template>
  <div class="header">
    <div class="sys-title">
      <!-- <img class="logo" src="../../assets/images/home/sys-title-icon.png" alt="logo" @click="goHome" /> -->
      <img class="logo" src="../../assets/images/home/logo.png" alt="logo" @click="goHome" />
      <img class="logo-title" src="../../assets/images/home/sys-title.svg" alt="" />

      <Crumbs v-if="!isHome" class="web-crumbs"></Crumbs>
    </div>
    <div class="right-btns">
      <Crumbs v-if="!isHome" class="web-return" displayType="return"></Crumbs>
      <div class="btn-item">
        <div class="btn" @click="goUserPage">
          <img src="../../assets/images/home/icon-person.svg" alt="" />
          <span class="btn-txt">个人中心</span>
        </div>
      </div>
      <div v-if="!isCityRole" class="btn-item">
        <div class="btn" @click="goMsgPage">
          <img src="../../assets/images/home/icon-msg.svg" alt="" />
          <span class="btn-txt">消息</span>
          <span class="badge" v-if="noticeMessage > 0">{{ noticeMessage > 99 ? '99+' : noticeMessage }}</span>
        </div>
      </div>
      <div class="btn-item">
        <div class="btn" @click="logout">
          <img src="../../assets/images/login/icon-logout.svg" alt="" />
          <span class="btn-txt">退出</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Crumbs from '@com/Crumbs.vue'
import { mapGetters } from 'vuex'
import { logout } from '@api/modules/user.js'

export default {
  name: 'homeHeader',
  data() {
    return {}
  },
  components: {
    Crumbs,
  },
  computed: {
    ...mapGetters(['noticeMessage', 'isCityRole']),
    isHome() {
      return this.$route.name === 'home'
    },
  },
  methods: {
    logout() {
      this.$confirm('确定退出登录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      }).then(() => {
        logout()
          .then(res => {
            if (res.status === 200) {
              this.$message.success('退出成功！')
              this.onLogout()
            }
          })
          .catch(() => {
            this.onLogout()
          })
      })
    },
    onLogout() {
      localStorage.removeItem('token')
      const remember = localStorage.getItem('efficacy_remember')
      const loginType = localStorage.getItem('loginType')
      if (remember === 'false' || (loginType && loginType === 'CA')) {
        localStorage.clear()
        sessionStorage.clear()
      }
      // 清空 store
      this.$store.commit('clearCommonAll')
      this.$store.commit('indication/clearIndEvaOrgs')
      this.$router.replace('/login')
    },
    goMsgPage() {
      this.$router.push('/msg')
    },
    goUserPage() {
      this.$router.push({
        name: 'userCenter',
      })
    },
    goHome() {
      this.$router.replace({
        name: 'home',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.header {
  height: 124px;
  background-image: url('../../assets/images/home/nav-bg.png');
  position: relative;
  .sys-title {
    display: flex;
    align-items: center;
    padding: 13px;
    .logo {
      margin-left: 12px;
      height: 45px;
      cursor: pointer;
      border-radius: 50%;
      margin-top: -4px;
      box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.5);
    }
    .logo-title {
      height: 45px;
    }
  }
  .right-btns {
    position: absolute;
    right: 20px;
    top: 10px;
    display: flex;
    align-items: center;
    .btn-item {
      .btn {
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
        height: 45px;
        padding: 10px 20px;
        position: relative;
        font-size: 16px;
        img {
          vertical-align: middle;
          display: inline-block;
        }
        .iconfont {
          color: #fff;
          vertical-align: middle;
          display: inline-block;
          font-size: 18px;
        }
        .btn-txt {
          color: #fff;
          vertical-align: middle;
          margin-left: 10px;
        }
        &:hover {
          background: rgba($color: #fff, $alpha: 0.2);
        }
      }
      &:not(:last-child) {
        &::after {
          content: '';
          display: inline-block;
          vertical-align: middle;
          width: 1px;
          height: 12px;
          margin: 0 10px;
          background: rgba($color: #fff, $alpha: 0.45);
        }
      }
    }
    .badge {
      position: absolute;
      top: 4px;
      right: 1px;
      background: #f54646;
      color: #fff;
      border-radius: 10px;
      font-size: 12px;
      height: 15px;
      line-height: 15px;
      padding: 0 4px;
    }
  }
  .web-crumbs {
    margin-left: 20px;
    margin-top: -5px;
  }
  .web-return {
    margin-right: 20px;
  }
}
</style>
